<template>
  <v-dialog-layout
    title="添加菜单"
    width="800px"
    v-model:visible="visible"
    @confirm="formAdd.onSubmit()"
    @cancel="cancel"
  >
    <v-form-layout
      ref="formAdd"
      v-model:form-data="formData"
      :rules="rules"
      @validateSuccess="validateSuccess"
    >
      <v-row-layout>
        <a-col :span="12">
          <a-form-item label="菜单名称" name="name" placeholder="请输入应用名称">
            <a-input v-model:value.trim="formData.name" />
          </a-form-item>
          <a-form-item label="菜单标题" name="title" placeholder="请输入应用编号">
            <a-input v-model:value.trim="formData.title" />
          </a-form-item>
          <a-form-item label="组件" required name="component" placeholder="请输入应用路径">
            <a-input v-model:value.trim="formData.component" />
          </a-form-item>
          <a-form-item label="菜单URL" name="path" placeholder="请输入显示顺序">
            <a-input v-model:value.trim="formData.path" />
          </a-form-item>
          <a-form-item label="重定向地址" name="redirect" placeholder="请输入显示顺序">
            <a-input v-model:value.trim="formData.redirect" />
          </a-form-item>
          <a-form-item label="图标类名" name="icon" placeholder="请输入显示顺序">
            <a-input v-model:value.trim="formData.icon" />
          </a-form-item>
          <a-form-item label="编号" name="menuCode" placeholder="请输入编号">
            <a-input v-model:value.trim="formData.menuCode" />
          </a-form-item>
          <a-form-item label="排序" name="menuSort" placeholder="请输入排序">
            <a-input v-model:value.trim="formData.menuSort" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="所属应用" name="appId" placeholder="请选择所属应用">
            <a-select v-model:value="formData.appId" placeholder="请选择">
              <template v-for="item in appList" :key="item.id">
                <a-select-option :value="item.id">{{ item.name }}</a-select-option>
              </template>
            </a-select>
          </a-form-item>
          <a-form-item label="是否外链" name="isFrame" placeholder="请选择是否外链">
            <a-select v-model:value="formData.isFrame" placeholder="请选择">
              <a-select-option :value="0">否</a-select-option>
              <a-select-option :value="1">是</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="是否白名单" name="isWhite" placeholder="请选择是否白名单">
            <a-select v-model:value="formData.isWhite" placeholder="请选择">
              <a-select-option :value="0">否</a-select-option>
              <a-select-option :value="1">是</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="是否隐藏" name="hidden" placeholder="请选择是否隐藏">
            <a-select v-model:value="formData.hidden" placeholder="请选择">
              <a-select-option :value="0">否</a-select-option>
              <a-select-option :value="1">是</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="是否缓存" name="cache" placeholder="请选择是否缓存">
            <a-select v-model:value="formData.cache" placeholder="请选择">
              <a-select-option :value="0">否</a-select-option>
              <a-select-option :value="1">是</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="是否可用" name="enabled" placeholder="请选择是否可用">
            <a-select v-model:value="formData.enabled" placeholder="请选择">
              <a-select-option :value="0">否</a-select-option>
              <a-select-option :value="1">是</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </v-row-layout>
    </v-form-layout>
  </v-dialog-layout>
</template>

<script setup lang="ts">
import { addRules } from './config'
import { Ref, ref, reactive, onMounted } from 'vue'
import useCurrentInstance from 'lib-utils/vueInstance'

const { proxy } = useCurrentInstance()
const props = withDefaults(defineProps<{
  visible: boolean,
  model: string,
  initForm: { [key: string]: any } | null
}>(), {
  visible: false,
  model: 'add'
})
const emit = defineEmits(['update:visible', 'close'])

let formAdd = ref();
let appList: Ref<any> = ref([]);
const formData:{
  id?: string | any,
  [key:string]: any
} = reactive({
  id: '',
  appId: '',
  parentId: null,
  name: '',
  title: '',
  component: '',
  path: '',
  redirect: '',
  icon: '',
  menuCode: '',
  menuSort: '',
  isFrame: 0,
  isWhite: 0,
  hidden: 0,
  cache: 0,
  enabled: 1
});
const rules = addRules

onMounted(() => {
  getAppList()
  if (props.initForm) {
    if (props.model === 'edit') {
      for (let item in formData) {
        formData[item] = props.initForm[item]
      }
    }
    if (props.model === 'add') {
      formData.parentId = props.initForm.id
      formData.appId = props.initForm.appId
    }
  }
  console.log(props.initForm, props.model)
  console.log(formData)
})

const getAppList = () => {
  proxy.$http.get(proxy.$api.application.listAll).then(res => {
    appList.value = res
  }).catch(() => {
  })
}

const validateSuccess = () => {
  if (formData.id) {
    proxy.$http.post(proxy.$api.menu.update, formData).then(res => {
      proxy.$vMessage.success('更新成功')
      emit('update:visible', false)
      emit('close', false)
    }).catch(() => {
    })
  } else {
    delete formData['id']
    proxy.$http.post(proxy.$api.menu.add, formData).then(res => {
      proxy.$vMessage.success('添加成功')
      emit('update:visible', false)
      emit('close', false)
    }).catch(() => {
    })
  }
};

const cancel = () => {
  emit('update:visible', false)
};

</script>

<style scoped>
</style>